<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="/css/octicons.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css" type="text/css">
    <title>chartjs-plugin-colorschemes</title>
    <meta property="og:title" content="chartjs-plugin-colorschemes" />
    <meta property="og:locale" content="en_US" />
    <link rel="canonical" href="https://nagix.github.io/chartjs-plugin-colorschemes" />
    <meta property="og:url" content="https://nagix.github.io/chartjs-plugin-colorschemes" />
    <meta property="og:site_name" content="chartjs-plugin-colorschemes" />
    <meta name="twitter:site" content="@nagix" />
    <meta name="theme-color" content="#ffffff">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes@0.4.0"></script>
  </head>
  <body>
    <section id="hero-spot" class="hero-spot">
      <h1>chartjs-plugin-colorschemes</h1>
      <h2><a href="./colorchart.html">Color Chart</a> | <a href="https://github.com/nagix/chartjs-plugin-colorschemes">GitHub</a></h2>
      <a href="./ja/" class="help-link">日本語</a>
    </section>
    <section id="tutorial" class="tutorial">
      <h2>Predefined color schemes for <a href="https://www.chartjs.org">Chart.js</a>.<br />Pick the perfect color combination for your data visualization.</h2>

      <div style="width: 550px; margin-left: auto; margin-right: auto">
        <canvas id="chart1"></canvas>
      </div>

      <ul id="plain-js" class="tutorial-list wrapper active">

        <li>
          <h4>Include scripts</h4>
          <p>First, we need to include <a href="https://github.com/chartjs/Chart.js/releases/latest">Chart.js</a> and <a href="https://github.com/nagix/chartjs-plugin-colorschemes/releases/latest">chartjs-plugin-colorschemes.js</a> in our page.</p>
          <div class="terminal">
            <div class="header"></div>
            <div class="shell">
              <p>&lt;script type="text/javascript" src="Chart.js"&gt;&lt;/script&gt;</p>
              <p>&lt;script type="text/javascript" src="chartjs-plugin-colorschemes.js"&gt;&lt;/script&gt;</p>
            </div>
          </div>
        </li>

        <li>
          <h4>Create a canvas</h4>
          <p>We need to have a canvas in our page.</p>
          <div class="terminal">
            <div class="header"></div>
            <div class="shell">
              <p>&lt;canvas id="myChart"&gt;&lt;/canvas&gt;</p>
            </div>
          </div>
        </li>

        <li>
          <h4>Create a chart</h4>
          <p>Now, we can create a chart. We add a script to our page.<br />Random number datasets are generated in this example.</p>
          <div class="terminal">
            <div class="header"></div>
            <div class="shell">
              <p>var ctx = document.getElementById('myChart').getContext('2d');</p>
              <p>var chart = new Chart(ctx, {</p>
              <p>&nbsp;&nbsp;type: 'line',</p>
              <p>&nbsp;&nbsp;data: {</p>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],</p>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;datasets: [1, 2, 3].map(function(i) {
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return {
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label: 'Dataset ' + i,
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data: [0, 0, 0, 0, 0, 0, 0].map(Math.random),
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fill: false
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
              <p>&nbsp;&nbsp;&nbsp;&nbsp;})</p>
              <p>&nbsp;&nbsp;}</p>
              <p>});</p>
            </div>
          </div>
        </li>

        <li>
          <h4>Pick a color scheme</h4>
          <p>We can pick a color scheme from <a href="./colorchart.html">Color Chart</a>.</p>
          <div class="terminal">
            <div class="header"></div>
            <div class="shell">
              <p>&nbsp;&nbsp;...</p>
              <p>&nbsp;&nbsp;options: {</p>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;plugins: {</p>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colorschemes: {</p>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scheme: '<span id="scheme-text">brewer.Paired12</span>'</p>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;}</p>
              <p>&nbsp;&nbsp;}</p>
            </div>
          </div>
          <p>
            <span>Color Scheme: <select id="scheme"></select></span>
            <span style="margin-left: 20px">Number of Datasets: <select id="num-datasets"></select></span>
          </p>
          <ul style="margin-bottom:-60px">
            <li>
              <div style="width:489px">
                <canvas id="chart2"></canvas>
              </div>
            </li>
            <li>
              <div style="width:489px; background-color:black; border-radius: 0 0 4px; position:absolute; right:0; bottom:0">
                <canvas id="chart3"></canvas>
              </div>
            </li>
          </ul>
        </li>

        <li>
          <h4>...and you're done!</h4>
          <p>See also <a href="https://github.com/nagix/chartjs-plugin-colorschemes">GitHub repository</a> and <a href="./colorchart.html">Color Chart</a></p>
          <div class="hero-octicon">
            <span class="mega-octicon octicon-check"></span>
          </div>
        </li>

      </ul>

    </section>
    <script>
      var ctx1 = document.getElementById('chart1').getContext('2d');
      var chart1 = new Chart(ctx1, {
        type: 'bar',
        data: {
          labels: Chart.colorschemes.brewer['Paired12'],
          datasets: [{
            data: Chart.colorschemes.brewer['Paired12'].map(function() {
              return Math.random() + 1;
            }),
            backgroundColor: Chart.colorschemes.brewer['Paired12']
          }]
        },
        options: {
          aspectRatio: 4,
          elements: {
            rectangle: {
              borderWidth: 1
            }
          },
          legend: {
            display: false
          },
          tooltips: {
            enabled: false
          },
          hover: {
            mode: null
          },
          scales: {
            xAxes: [{
              display: false
            }],
            yAxes: [{
              display: false,
              ticks: {
                min: 0,
                max: 2.5
              }
            }]
          }
        }
      });

      var count = 0;

      setInterval(function() {
        var scheme = ['Paired12', 'YlGnBu9', 'PiYG11', 'RdPu9', 'Spectral11', 'Oranges9', 'BrBG11'][++count % 7];
        var colors = Chart.colorschemes.brewer[scheme];

        chart1.data.labels = colors;
        chart1.data.datasets[0].data = colors.map(function() {
          return Math.random() + 1;
        });
        chart1.data.datasets[0].backgroundColor = colors;
        chart1.update();
      }, 3000);

      var data = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [1, 2, 3].map(function(i) {
          return {
            label: 'Dataset ' + i,
            data: [0, 0, 0, 0, 0, 0, 0].map(Math.random),
            fill: false
          };
        })
      };
      var plugginOpts = {
        colorschemes: {
          scheme: 'brewer.Paired12'
        }
      };
      var generateLabels = function(chart) {
        return chart.data.datasets.map(function(dataset, i) {
          return {
            text: dataset.label,
            hidden: !chart.isDatasetVisible(i),
            strokeStyle: dataset.borderColor,
            pointStyle: 'line',
            datasetIndex: i
          };
        });
      };

      var ctx2 = document.getElementById('chart2').getContext('2d');
      var chart2 = new Chart(ctx2, {
        type: 'line',
        data: data,
        options: {
          aspectRatio: 1.75,
          layout: {
            padding: 14
          },
          legend: {
            labels: {
              generateLabels: generateLabels,
              usePointStyle: true
            }
          },
          plugins: plugginOpts
        }
      });

      var ctx3 = document.getElementById('chart3').getContext('2d');
      var chart3 = new Chart(ctx3, {
        type: 'line',
        data: data,
        options: {
          aspectRatio: 1.75,
          layout: {
            padding: 14
          },
          legend: {
            labels: {
              fontColor: '#ccc',
              generateLabels: generateLabels,
              usePointStyle: true
            }
          },
          tooltips: {
            backgroundColor: 'rgba(255, 255, 255, 0.8)',
            titleFontColor: '#000',
            bodyFontColor: '#000'
          },
          scales: {
            xAxes: [{
              gridLines: {
                color: 'rgba(255, 255, 255, 0.2)',
                zeroLineColor: 'rgba(255, 255, 255, 0.5)'
              },
              ticks: {
                fontColor: '#ccc'
              }
            }],
            yAxes: [{
              gridLines: {
                color: 'rgba(255, 255, 255, 0.2)',
                zeroLineColor: 'rgba(255, 255, 255, 0.5)'
              },
              ticks: {
                fontColor: '#ccc'
              }
            }]
          },
          plugins: plugginOpts
        }
      });

      var colorSchemes = Chart.colorschemes;

      document.getElementById('scheme').innerHTML =
        Object.keys(colorSchemes).map(function(category) {
          return Object.keys(colorSchemes[category]).map(function(scheme) {
            var schemeName = category + '.' + scheme;
            return '<option value="' + schemeName + '"' +
              (schemeName === 'brewer.Paired12' ? ' selected>' : '>') +
              schemeName + '</option>';
          }).join();
        }).join();

      document.getElementById('scheme').addEventListener('change', function(event) {
        var scheme = event.target.value;

        chart2.options.plugins.colorschemes.scheme = scheme;
        chart3.options.plugins.colorschemes.scheme = scheme;
        chart2.update();
        chart3.update();
        document.getElementById('scheme-text').innerHTML = scheme;
      });

      document.getElementById('num-datasets').innerHTML =
        [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21].map(function(i) {
          return '<option value="' + i + '"' + (i === 3 ? ' selected>' : '>') + i + '</option>';
        }).join();

      document.getElementById('num-datasets').addEventListener('change', function(event) {
        var numDatasets = event.target.value;

        data.datasets.splice(numDatasets, data.datasets.length - numDatasets);
        for (var i = data.datasets.length; i < numDatasets; ++i) {
          data.datasets.push({
            label: 'Dataset ' + (i + 1),
            data: [0, 0, 0, 0, 0, 0, 0].map(Math.random),
            fill: false
          });
        }
        chart2.update();
        chart3.update();
      });
    </script>
    <footer class="page-footer">
      <ul class="site-footer-links right">
        <li><a href="https://github.com/nagix"><i class="fa fa-github-square fa-2x" style="color: #999;"></i></a></li>
        <li><a href="https://twitter.com/nagix"><i class="fa fa-twitter-square fa-2x" style="color: #999;"></i></a></li>
        <li><a href="https://www.linkedin.com/in/akihiko-kusanagi"><i class="fa fa-linkedin-square fa-2x" style="color: #999;"></i></a></li>
      </ul>
      <a href="/">
        <img src="/favicon-32x32-glay.png" style="position: absolute; top: 34px; left: 50%; margin-left: -16px;">
      </a>
      <ul class="site-footer-links">
        <li>&copy; 2019 Akihiko Kusanagi</li>
      </ul>
    </footer>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-39988758-2', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
</html>
